<template>
  <view class="my-container">
    <!-- 顶部背景区域 -->
    <view class="top-bg">
      <image src="/static/imgs/personalCenter/personbg.png" mode="aspectFill" class="bg-image"></image>
      <view class="change-bg-btn" @click="changeBackground">更换背景</view>
    </view>
    
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <!-- 头像区域 -->
      <view class="avatar-section">
        <view class="avatar-container">
          <image :src="userinfos.avatar" mode="aspectFill" class="user-avatar"></image>
        </view>
<!--        <view class="edit-btn" @click="editProfile">
            <image src="/static/xiugai07_1.png" mode="aspectFit" class="edit-icon"></image>
            <text class="edit-text">编辑</text>
          </view> -->
      </view>
      
      <!-- 基本信息 -->
      <view class="user-basic-info">
        <view class="nickname">{{ userinfos.nickname }}</view>
<!--        <view class="role-info">
           <image src="/static/guanliyuan-2 1.png" mode="aspectFit" class="role-icon"></image>
           <text class="role-text">{{ userData.role }}</text>
         </view> -->
<!--        <view class="status-section">
          <view class="status">
            <text class="status-emoji">{{ userData.status.emoji }}</text>
            <text class="status-text">{{ userData.status.text }}</text>
            <image src="/static/shuaxin_1.png" mode="aspectFit" class="refresh-icon"></image>
          </view>
          <view class="version">版本号：{{ userData.version }}</view>
        </view> -->
      </view>
    </view>
    
    <!-- 商户信息卡片 -->
    <view class="merchant-card" @click="viewMerchantDetail">
      <view class="merchant-info">
         <image src="/static/imgs/personalCenter/Service.png" mode="aspectFit" class="merchant-icon"></image>
        <view class="merchant-text-section">
          <view class="merchant-name">{{ shops.name }}</view>
          <view class="merchant-owner">商户拥有者：{{ userData.merchant.owner }}</view>
        </view>
    <!--    <image src="/static/jiantou2_1.png" mode="aspectFit" class="right-arrow"></image> -->
      </view>
<!--      <view class="merchant-id-section">
        <text class="merchant-id-label">商户MID:</text>
        <text class="merchant-id">{{ userData.merchant.mid }}</text>
        <view class="copy-btn" @click.stop="copyMerchantId">
          <text class="copy-text">复制</text>
          <image src="/static/imgs/personalCenter/Footprint.png" mode="aspectFit" class="copy-icon"></image>
        </view>
      </view> -->
    </view>
    
    <!-- 我的服务 -->
<!--    <view class="services-section">
      <view class="section-title">我的服务</view>
      <view class="services-grid">
        <view class="service-item" v-for="(service, index) in userData.services" :key="index">
          <image :src="service.icon" mode="aspectFit" class="service-icon"></image>
          <text class="service-name">{{ service.name }}</text>
        </view>
      </view>
    </view> -->
    
    <!-- 退出账号按钮 -->
    <view class="logout-section">
      <button class="logout-btn" @click="logout">退出账号</button>
    </view>
    
    <!-- 备案信息 -->
<!--    <view class="record-info">
      <text class="record-text">APP备案号：浙ICP备********号-2A</text>
    </view>
    -->
    <!-- 编辑资料弹窗 -->
    <uv-popup ref="profilePopup" mode="bottom" safeAreaInsetBottom="true">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">编辑个人资料</text>
          <text class="popup-close" @click="closeProfilePopup">×</text>
        </view>
        <view class="popup-body">
          <!-- 头像上传 -->
          <view class="form-item">
            <text class="form-label">头像</text>
            <view class="avatar-upload">
              <image :src="editForm.avatar || userData.avatar" mode="aspectFill" class="preview-avatar"></image>
              <view class="upload-btn" @click="chooseAvatar">上传头像</view>
            </view>
          </view>
          
          <!-- 昵称输入 -->
          <view class="form-item">
            <text class="form-label">昵称</text>
            <input type="text" v-model="editForm.nickname" placeholder="请输入昵称" class="form-input"/>
          </view>
        </view>
        <view class="popup-footer">
          <button class="submit-btn" @click="submitProfile">保存修改</button>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
import { getshopmy,getuserlogout } from '../../api';
export default {
  data() {
    return {
      // 写死的数据
	  shops:[],
	  userinfos:[],
        userData: {
          avatar: '/static/imgs/personalCenter/tab4.png',
        nickname: '大宇哥',
        role: '超级管理员',
        status: {
          emoji: '😊',
          text: '上班中'
        },
        version: '6.6.57',
        merchant: {
          name: '鑫辰台球',
          owner: '鑫辰台球',
          mid: '511436'
        },
        services: [
            {
              icon: '/static/imgs/personalCenter/ai.png',
              name: '实验室功能'
            },
            {
              icon: '/static/imgs/personalCenter/con1.png',
              name: '消息推送'
            },
            {
              icon: '/static/imgs/personalCenter/regulation.png',
              name: '用户协议'
            },
            {
              icon: '/static/imgs/personalCenter/system.png',
              name: '隐私声明'
            },
            {
              icon: '/static/imgs/personalCenter/Information.png',
              name: '关于我们'
            }
          ]
      },
      editForm: {
        nickname: '',
        avatar: ''
      }
    };
  },
  onShow() {
    // 页面显示时，初始化编辑表单
    this.editForm.nickname = this.userData.nickname || '';
    this.editForm.avatar = '';
	this.init();
  },
  methods: {
    // 更换背景
	async init(){
		let res=await getshopmy();
		this.shops=res.data.shop;
		this.userinfos=res.data.userinfo;
		
		console.log('res我的',res);
	},
    changeBackground() {
      // 实现更换背景功能
      uni.showToast({
        title: '更换背景功能开发中',
        icon: 'none'
      });
    },
    
    // 查看商户详情
    viewMerchantDetail() {
      // 实现查看商户详情功能
      uni.showToast({
        title: '查看商户详情功能开发中',
        icon: 'none'
      });
    },
    
    // 复制商户ID
    copyMerchantId() {
      uni.setClipboardData({
        data: this.userData.merchant.mid,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          });
        }
      });
    },
    
    // 退出账号
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出当前账号吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除登录信息
			this.tuichu();
            uni.removeStorageSync('userInfo');
            // 跳转到登录页
            uni.redirectTo({
              url: '/pages/login/login'
            });
          }
        }
      });
    },
  async  tuichu(){
	  let res = await getuserlogout();
  },
    // 打开编辑资料弹窗
    editProfile() {
      this.editForm.nickname = this.userData.nickname || '';
      this.editForm.avatar = ''; // 重置上传的头像
      this.$refs.profilePopup.open();
    },
    
    // 关闭编辑资料弹窗
    closeProfilePopup() {
      this.$refs.profilePopup.close();
    },
    
    // 选择头像
    chooseAvatar() {
      const _this = this;
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success(res) {
          const tempFilePath = res.tempFilePaths[0];
          _this.editForm.avatar = tempFilePath;
        }
      });
    },
    
    // 提交个人资料修改
    async submitProfile() {
      if (!this.editForm.nickname.trim()) {
        uni.showToast({
          title: '昵称不能为空',
          icon: 'none'
        });
        return;
      }
      
      try {
        // 这里只是模拟提交，实际项目中需要调用真实接口
        // 调用编辑个人资料接口
        const params = {
          nickname: this.editForm.nickname.trim()
        };
        
        // 如果有新上传的头像，添加到参数中
        if (this.editForm.avatar) {
          params.avatar = this.editForm.avatar;
        }
        
        // 模拟请求成功
        setTimeout(() => {
          // 更新本地数据
          this.userData.nickname = this.editForm.nickname.trim();
          if (this.editForm.avatar) {
            this.userData.avatar = this.editForm.avatar;
          }
          
          uni.showToast({
            title: '修改成功',
            icon: 'success'
          });
          
          this.closeProfilePopup();
        }, 500);
      } catch (error) {
        console.error('提交个人资料失败:', error);
        uni.showToast({
          title: '网络异常，请稍后重试',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style scoped>
/* 基础容器 */
.my-container {
  padding: 0;
  margin: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
  position: relative;
  padding-bottom:80rpx;
}

/* 顶部背景区域 */
.top-bg {
  width: 100%;
  height: 300rpx;
  position: relative;
  overflow: hidden;
}

.bg-image {
  width: 100%;
  height: 100%;
}

.change-bg-btn {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  color: #fff;
  font-size: 28rpx;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
}

/* 用户信息卡片 */
.user-card {
  position: relative;
  background-color: #fff;
  margin: -80rpx 30rpx 0 30rpx;
  border-radius: 20rpx;
  padding: 40rpx 30rpx 30rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.avatar-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.avatar-container {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.user-avatar {
  width: 100%;
  height: 100%;
}

.edit-btn {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
}

.edit-icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 8rpx;
}

.edit-text {
  font-size: 24rpx;
  color: #666;
}

.user-basic-info {
  padding-left: 10rpx;
}

.nickname {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.role-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.role-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 10rpx;
}

.role-text {
  font-size: 28rpx;
  color: #666;
}

.status-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status {
  display: flex;
  align-items: center;
}

.status-emoji {
  font-size: 28rpx;
  margin-right: 8rpx;
}

.status-text {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}

.refresh-icon {
  width: 24rpx;
  height: 24rpx;
}

.version {
  font-size: 28rpx;
  color: #666;
}

/* 商户信息卡片 */
.merchant-card {
  margin: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.merchant-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25rpx;
}

.merchant-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.merchant-text-section {
  flex: 1;
}

.merchant-name {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.merchant-owner {
  font-size: 26rpx;
  color: #999;
}

.right-arrow {
  width: 24rpx;
  height: 24rpx;
  color: #999;
}

.merchant-id-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 25rpx;
  border-top: 1rpx solid #f0f0f0;
}

.merchant-id-label {
  font-size: 28rpx;
  color: #666;
}

.merchant-id {
  font-size: 28rpx;
  color: #333;
  margin-left: 10rpx;
  flex: 1;
}

.copy-btn {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  padding: 8rpx 20rpx;
  border-radius: 16rpx;
}

.copy-text {
  font-size: 24rpx;
  color: #666;
  margin-right: 8rpx;
}

.copy-icon {
  width: 20rpx;
  height: 20rpx;
}

/* 我的服务 */
.services-section {
  margin: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.services-grid {
  display: flex;
  flex-wrap: wrap;
}

.service-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.service-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 15rpx;
}

.service-name {
  font-size: 26rpx;
  color: #666;
  text-align: center;
}

/* 退出账号按钮 */
.logout-section {
  margin: 30rpx;
  padding: 0 30rpx;
}

.logout-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #fff;
  color: #ff4d4f;
  border: none;
  border-radius: 45rpx;
  font-size: 34rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

/* 备案信息 */
.record-info {
  margin-top: 40rpx;
  margin-bottom: 100rpx;
  text-align: center;
}

.record-text {
  font-size: 24rpx;
  color: #999;
}

/* 弹窗样式 */
.popup-content {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding-bottom: 140rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.popup-close {
  font-size: 48rpx;
  color: #999;
}

.popup-body {
  padding: 30rpx 40rpx;
}

.form-item {
  margin-bottom: 40rpx;
}

.form-label {
  display: block;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.avatar-upload {
  display: flex;
  align-items: center;
}

.preview-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  margin-right: 30rpx;
}

.upload-btn {
  font-size: 30rpx;
  color: #1aad19;
  padding: 15rpx 30rpx;
  border: 1rpx solid #1aad19;
  border-radius: 40rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 32rpx;
}

.popup-footer {
  padding: 0 40rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #1aad19;
  color: #fff;
  border: none;
  border-radius: 45rpx;
  font-size: 34rpx;
}
</style>